<template>
  <!-- 商品详情页 -->
  <div class="product-detail">
    <!-- 商品详情页头部 -->
    <ProductDetailHeader @productRoll="roll"></ProductDetailHeader>
    <!-- 商品详情页轮播图 -->
    <ProductDetailRotation :imgs="[address, Imgs]"></ProductDetailRotation>
    <!-- 商品信息 -->
    <ProductDetailXx :list="list"></ProductDetailXx>
    <div ref="productTop">
      <!-- 商品详情 -->
      <ProductDetailXq :list="newStr"></ProductDetailXq>
      <!-- 商品推荐 -->
      <div ref="foot">
        <UserRecommend>
          <div slot="introduce" class="foot" ref="cont">商品推荐</div>
        </UserRecommend>
      </div>
      <!-- 购物 -->
      <ProductDetailShopping :list="list" :imgs="Imgs"></ProductDetailShopping>
    </div>
  </div>
</template>

<script>
// 在父组件中获取数据对应的子组件需要在传给它
import { detail } from "../../api/index.js";
import ProductDetailHeader from "./components/productDetailHeader.vue";
import ProductDetailRotation from "./components/productDetailRotation.vue";
import ProductDetailXx from "./components/productDetailXx.vue";
import ProductDetailXq from "./components/productDetailXq.vue";
import ProductDetailShopping from "./components/productDetailShopping.vue";
import UserRecommend from '../user/components/userRecommend.vue'
export default {
  components: {
    ProductDetailHeader,
    ProductDetailRotation,
    ProductDetailXx,
    ProductDetailXq,
    ProductDetailShopping,
    UserRecommend
  },
  data() {
    return {
      // 商品对应id
      id: this.$route.params.id,
      list: [],
      // 轮播图图片
      Imgs: [],
      // 图片数据头
      address: "",
      newStr: [],
    };
  },

  mounted() {
    let params = {
      id: this.id,
    };
    detail((res) => {
      this.list = res.data.data;
      // 因为 subImages 的数据是一条字符串每一条需要的数据中间以','间隔,需要做分割处理
      this.Imgs = this.list.subImages.split(",");
      this.address = this.list.imageHost;
      let str = this.list.detail;

      // 把文件后缀.jpg和.png的给提取出来
      let re = /(\/\/\S+(\.jpg|\.png))/g;
      // replace和正则结合起来使用
      str.replace(re, (str) => {
        this.newStr.push(str);
      });
    }, params);
  },
  methods: {
    roll(index) {
      // 详情页点击跳到对应的视口
      switch (index) {
        case 1:
          window.scroll(0, 0);
          break;
        case 2:
          // offsetTop距离顶部的距离
          window.scroll(0, this.$refs.productTop.offsetTop - 40);
          break;
        case 3:
          window.scroll(0, this.$refs.foot.offsetTop - this.$refs.cont.clientHeight);
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.product-detail {
  width: 100%;
}

.foot {
  margin-top: 30px;
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 36px;
  background-color: rgb(247, 247, 247);
}
</style>